<script setup lang="ts">
import { columns } from '../attribute/columns'
import { useAdminAuthenticationStore } from '../store/adminAuthentication'
import { storeToRefs } from 'pinia'
import { SearchIcon } from 'tdesign-icons-vue-next'
import { onMounted, ref } from 'vue'
import { post } from '@/utils/api'
import SaveDialog from './SaveDialog.vue'
import DeleteDialog from './DeleteDialog.vue'
import { MessagePlugin } from 'tdesign-vue-next'

const store = useAdminAuthenticationStore()
const {
  tableData,
  tableLoading,
  saveDialogVisible,
  deleteIds,
  deleteVisible,
  saveMode,
  isForever,
  contentLoading
} = storeToRefs(store)
const { getData, formData, appNameModel } = store

onMounted(async () => {
  await getData()
  contentLoading.value = false
})

const searchData = ref()
const search = async () => {
  if (searchData.value === undefined || searchData.value.trim() === '') {
    await getData()
    return
  }
  tableData.value = []
  tableData.value = await post('/api/program/search', { name: searchData.value.trim() })
}

const refresh = async () => {
  searchData.value = undefined
  await getData()
}

const assignFormData = (row: any) => {
  Object.assign(formData, row)
  formData.appId = row.appId.toString()
  appNameModel.value = row.appId
  formData.userId = row.userId === undefined ? '' : row.userId.toString()
  isForever.value = row.overDate === '2099-12-31'
}

const add = () => {
  saveMode.value = 'add'
  saveDialogVisible.value = true
}

const edit = (row: any) => {
  saveMode.value = 'edit'
  assignFormData(row)
  saveDialogVisible.value = true
}

const singleDelete = (row: any) => {
  deleteVisible.value = true
  deleteIds.value = [row.id]
}
const batchDelete = () => {
  if (deleteIds.value.length === 0) {
    MessagePlugin.closeAll()
    MessagePlugin.warning('删除失败，数据为空！')
    return
  }
  deleteVisible.value = true
}

const selectIdsChange = (ids: any) => {
  deleteIds.value = ids
}

const updateStatus = async (row: any) => {
  const { id, status } = row
  const response = await post('/api/auth/update', { id, status })
  MessagePlugin.closeAll()
  MessagePlugin(response.status, response.message)
  await getData()
}
</script>

<template>
  <t-card v-if="!contentLoading">
    <t-space>
      <t-input v-model="searchData" placeholder="[应用名称]" size="small" @enter="search">
        <template #suffixIcon>
          <search-icon />
        </template>
      </t-input>
      <t-button size="small" theme="primary" @click="search">搜索</t-button>
      <t-button size="small" theme="primary" variant="outline" @click="add"> 添加 </t-button>
      <t-button size="small" theme="primary" variant="outline" @click="batchDelete">
        删除
      </t-button>
      <t-button size="small" theme="primary" variant="outline" @click="refresh"> 刷新 </t-button>
    </t-space>
    <t-divider />
    <t-table
      :columns="columns"
      :data="tableData"
      row-key="id"
      :async-loading="tableLoading"
      hover
      stripe
      :pagination="{
        defaultCurrent: 1,
        defaultPageSize: 5,
        total: tableData.length
      }"
      :selected-row-keys="deleteIds"
      @select-change="selectIdsChange"
      cellEmptyContent="-"
      ref="tableRef"
      empty="暂无授权信息"
    >
      <template #status="{ row }">
        <t-switch
          v-model="row.status"
          :customValue="[1, 0]"
          size="small"
          @change="updateStatus(row)"
        ></t-switch>
      </template>
      <template #operate="{ row }">
        <div class="operate">
          <t-button class="item" size="small" variant="outline" @click="edit(row)">编辑</t-button>
          <t-button class="item" size="small" variant="outline" @click="singleDelete(row)"
            >删除</t-button
          >
        </div>
      </template>
      <template #type="{ row }">
        {{ row.type === 0 ? '域名' : 'IP' }}
      </template>
      <template #overDate="{ row }">
        {{ row.overDate === '2099-12-31' ? '永久' : row.overDate }}
      </template>
    </t-table>
  </t-card>

  <SaveDialog />
  <DeleteDialog />
</template>

<style scoped lang="sass">
.operate > *
  margin: 0 5px
</style>
